<template>
  <div class="chatDetails">
    <van-nav-bar
      :title="chatNameTitle"
      left-text
      left-arrow
      @click-left="onClickLeft"
      @click-right="onClickRight"
      fixed
    >
      <van-icon name="wap-nav" slot="right" />
    </van-nav-bar>
    <div class="box">
      <div v-for="(v,k) in chat[k].list" :key="k">
        <!-- 对方聊天信息 -->
        <div class="box-list-he" v-if="!sendJudge(v)">
          <div class="user-img">
            <img :src="v.dstimg" />
          </div>
          <div class="box-content">
            <!--群聊时显示用户名 暂停屏蔽-->
            <!-- <div class="user-name" v-if="chatName.cmd">{{v.name}}</div> -->
            <div class="user-content">{{v.content}}</div>
          </div>
        </div>

        <!-- 我的聊天信息 -->
        <div class="box-list-me" v-if="sendJudge(v)">
          <div class="user-img">
            <img :src="thisUser.avatar" />
          </div>
          <div class="box-content">
            <!--群聊时显示用户名 暂停屏蔽-->
            <!-- <div class="user-name" v-if="chatName.cmd">{{v.name}}</div> -->
            <div class="user-content">{{v.content}}</div>
          </div>
        </div>
      </div>
    </div>

    <div class="input-box">
      <textarea rows="1" @keyup.enter="send()" v-model="value"></textarea>
    </div>
    <div class="input-zw"></div>
  </div>
</template>

<script>
//聊天详情
export default {
  name: "chatDetails",
  data() {
    return {
      uid: "", //当前用户Id
      value: "",
      k: 0,
      //聊天信息
      chatName: {
        id: 1,
        username: "祢豆子",
        status: "在线",
        cmd: 0 //0单聊,1群聊
      },
      //当前用户信息
      thisUser: {}
    };
  },
  created() {
    this.k = this.$route.query.k;
    var info = this.STORAGE.getObj("friends")[this.k];
    this.chatName.name = info.username;
    this.chatName.id = info.id;
    this.thisUser = this.STORAGE.getObj("userinfo");
  },
  computed: {
    chat() {
      return this.$store.getters.getFriends;
    },
    chatNameTitle() {
      //群聊
      if (this.chatName.cmd == 1) {
        return this.chatName.name;
      } else {
        return this.chatName.name + "(" + this.chatName.status + ")";
      }
    }
  },
  methods: {
    onClickLeft() {
      this.$router.push({
        path: "/"
      });
    },
    onClickRight() {},
    send() {
      var msg = {
        id: new Date().getTime(), //消息id
        userid: this.thisUser.id, //谁发的
        cmd: 0, //群聊还是私聊
        dstid: this.chatName.id, //对端Id
        dstimg: this.thisUser.avatar,
        content: this.value
      };
      msg.key = this.k;
      msg.send = 0; //区分是发送者还是接受者 0 发送者 1接收者
      this.$store.dispatch("push", msg);

      this.ws.onSendWs(msg);

      this.value = "";
    },
    //判断是发送者还是接收者
    sendJudge(row) {
      if (row.send == 0) {
        return true;
      } else {
        return false;
      }
    }
  }
};
</script>

<style scoped lang="less">
.chatDetails {
  .input-box {
    width: 100%;
    height: auto;
    background: #f4f5f5;
    position: fixed;
    left: 0;
    bottom: 0;

    textarea {
      width: 92%;
      margin-left: 2%;
      background-color: white;
      border-radius: 5px;
      border: none;
      resize: none;
      padding: 5px;
    }
  }
  .input-zw {
    width: 100%;
    height: 40px;
    clear: both;
  }

  .box {
    width: 100%;

    .box-list-he {
      margin: 10px;
      clear: both;

      .user-img {
        width: 12%;
        float: left;

        img {
          width: 30px;
          height: 30px;
          border-radius: 50%;
        }
      }

      .box-content {
        float: left;

        .user-name {
          font-size: 12px;
          color: #787979;
        }

        .user-content {
          height: auto;
          font-size: 14px;
          padding: 8px;
          background-color: white;
          border-radius: 5px;
          margin-bottom: 10px;
        }
      }
    }

    .box-list-me {
      margin: 10px;
      clear: both;

      .user-img {
        width: 12%;
        float: right;

        img {
          width: 30px;
          height: 30px;
          border-radius: 50%;
        }
      }

      .box-content {
        float: right;
        text-align: right;
        margin-right: 10px;

        .user-name {
          font-size: 12px;
          color: #787979;
        }

        .user-content {
          height: auto;
          font-size: 14px;
          padding: 8px;
          background-color: #8bdb00;
          border-radius: 5px;
          margin-bottom: 10px;
        }
      }
    }
  }
}
</style>
